<!--  -->
<template>
  <div class="bigBox">
    <div class="box" @click.stop="onBack">
      <img :src="src" alt="" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
interface Props {
  src: string
}
const props = withDefaults(defineProps<Props>(), {
  src: 'https://new-kaka.oss-cn-beijing.aliyuncs.com/company%2FC202305150001%2F20230522-101446_1701660628998.jpg'
})
const emit = defineEmits(['back'])
function onBack() {
  emit('back')
}
</script>

<style lang="less" scoped>
.box {
  width: 100vw;
  height: 100vh;
  background-color: black;
  display: flex;
  align-items: center;
}
img {
  width: 100%;
}
.bigBox {
  position: fixed;
  left: 0;
  bottom: 0px;
  z-index: 10;
  display: block;
  width: 100%;
  background-color: #fff;
  z-index: 200;
  height: 100%;
}
</style>
